<template>
    <div class="container">
        <div id="siderbar">
            <ul>
            <el-row class="tac">
                <el-col :span="12">
                    <el-menu
                        :default-active="this.$router.name"
                        router
                        class="el-menu-vertical-demo"
                    >
                        <el-menu-item index="/user/postList"><li>
                            <router-link to="/user/postList">全部博客</router-link>
                        </li></el-menu-item>
                        <li><a style="margin-bottom: 0">关于我的</a></li>
                        <el-sub-menu index="/user" >
                            <el-menu-item-group class="ddd" >
                                <el-menu-item index="/user/index"><li><router-link to="/user/index" style="margin-bottom: 2px">我的博客</router-link></li></el-menu-item>
                                <el-menu-item index="/user/myRemarks"><li><router-link to="/user/myRemarks" style="margin-bottom: 2px">我的评论</router-link></li></el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group class="ddd">
                                <el-menu-item index="/user/myLove"><li><router-link to="/user/myLove" style="margin-bottom: 2px">我的收藏</router-link></li></el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item index="/user/message"><li>
                                <router-link to="/user/message">发送消息</router-link>
                            </li></el-menu-item>
                        </el-sub-menu>
                        <el-menu-item index="/user">
                            <span><a @click="logout" style="margin-top: 60px">退出登录</a></span>
                        </el-menu-item>
                    </el-menu>
                </el-col>
            </el-row>

            </ul>
        </div>
        <div class="main-body">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
import axios from "axios";
export default {
     methods: {
         logout() {
             axios.post('/api/logout')
                 .then(response => {
                     localStorage.removeItem('user');
                     this.$router.push('/login');
                 })
                 .catch(error => {
                     console.log(error);
                 });
         }
     }
}
</script>


<style lang="css">
.container {
    display: flex;
    height: 100%;
}
#siderbar {
    width: 250px;
    height: 100%;
    background: #000;
}
#siderbar li a {
    display: block;
    height:69.7px;
    line-height: 69.7px;
    margin-bottom: 60px;
    text-decoration: none;
    color:#fff;

}
#siderbar li a:hover{
    cursor: pointer;
    background: linear-gradient(90deg,#72fe53,#000000,#72fe53);
}
#siderbar li a.router-link-active {
    background: linear-gradient(90deg,#72fe53,#000000,#72fe53);
}
.main-body {
    flex: 1;
    height: 100%;
    background: #f5f5f5;
}
svg{
    width: 1em;
    height: 1em;
}
a{
    cursor: pointer;
}
.ddd{
    font-size: 10px;

}
</style>

